<template>
  <div class="nav">
    <div class="nav-content">
      <el-menu
          class="el-menu-demo"
          mode="horizontal" :ellipsis="false">
        <el-menu-item class="logo-item">
          <div class="logo">
            <span class="logo-text">H-DOT</span>
          </div>
        </el-menu-item>
      </el-menu>  
    </div>
  </div>
</template>

<style scoped>
.nav {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(21, 24, 42, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
}

.el-menu {
  --el-menu-bg-color: transparent !important;
  --el-menu-text-color: #e6e8f0 !important;
  --el-menu-hover-text-color: #ffffff !important;
  --el-menu-active-color: #7a9dff !important;
  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.05) !important;
  --el-menu-border-color: transparent !important;
  width: auto;
  margin-left: 0;
  border: none !important;
}

:deep(.el-menu-item) {
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.logo-item {
  padding: 0 20px !important;
}

.logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(45deg, #4a80ff, #6e5eff);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 1px;
  font-family: 'Arial', sans-serif;
}
</style>

